<template>
  <div class="container">
    <h3 class="title">
      <svg-icon icon-class="nested"
                class="title-icon" />
      设备管理/设备详情
    </h3>

    <el-card>
      <div slot="header">
        <span>设备信息</span>
      </div>
      <el-form :model="form"
               label-position="left"
               label-width="120px">
        <el-form-item label="设备编号:">{{form.no}}</el-form-item>
        <el-form-item label="管理员姓名:">
          <!-- <el-input v-model="form.managementName" style="width:50%;" placeholder="请输入"></el-input> -->
          {{form.managementName}}
        </el-form-item>
        <el-form-item label="管理员手机号:">
          <!-- <el-input
            v-model="form.managementPhone"
            style="width:50%;"
            maxlength="11"
            placeholder="请输入"
          ></el-input> -->
          {{form.managementPhone}}
        </el-form-item>
        <!-- <el-form-item label="摄像头IP地址:">
          <el-input v-model="form.cameraIp"
                    style="width:50%;"
                    placeholder="请输入"></el-input>
        </el-form-item>-->
        <el-form-item label="绑定项目:">
          <!-- <el-select v-model="form.projectId" placeholder="请选择">
            <el-option label="请选择" value></el-option>
            <el-option :label="item.name" :value="item.id" v-for="(item,index)  in options"></el-option>
          </el-select> -->
          {{form.projectName}}
        </el-form-item>
        <el-form-item>
          <!-- <el-button type="primary" size="small" v-if="id==''" @click="onSubmit">确定</el-button> -->
          <!-- <el-button type="primary" size="small" v-if="id!=''" @click="editDevices">确定</el-button> -->
          <el-button size="small"
                     @click="onCancle">返回</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getDetail, addDevice, getNo, editDevice } from "@/api/device";
import { getProjectList } from "@/api/project";
export default {
  name: "editManage",
  data () {
    return {
      form: {
        no: "",
        managementName: "",
        managementPhone: "",
        cameraIp: "",
        projectId: ""
      },
      id: "",
      options: []
    };
  },
  mounted () {
    this.getOptions();
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      this.getData(this.id);
    } else {
      this.getNum();
    }
  },
  computed: {
    visitedViews () {
      return this.$store.state.tagsView.visitedViews;
    }
  },
  methods: {
    onSubmit () {
      if (this.form.no == "") {
        return this.$message({
          message: "请填写设备编号",
          type: "warning"
        });
      }
      if (this.form.managementName == "") {
        return this.$message({
          message: "请填写管理员姓名",
          type: "warning"
        });
      }
      if (this.form.managementPhone == "") {
        return this.$message({
          message: "请填写管理员手机号",
          type: "warning"
        });
      }
      if (
        this.form.managementPhone.length != 11 &&
        this.form.managementPhone.substring(0, 1) != 1
      ) {
        return this.$message({
          message: "请填写正确的管理员手机号",
          type: "warning"
        });
      }
      // if (this.form.cameraIp == '') {
      //   return this.$message({
      //     message: '请填写摄像头IP地址',
      //     type: 'warning'
      //   });
      // }

      addDevice(
        this.form.no,
        this.form.cameraIp,
        this.form.managementName,
        this.form.managementPhone,
        this.form.projectId
      ).then(res => {
        if (res.code == 200) {
          this.$message({
            message: "提交成功",
            type: "success"
          });
          document
            .querySelector(".tags-view-item.active>span.el-icon-close")
            .click();
        } else {
          this.$message({
            message: res.message,
            type: "warning"
          });
        }
      });
    },
    editDevices () {
      if (this.form.managementName == "") {
        return this.$message({
          message: "请填写管理员姓名",
          type: "warning"
        });
      }
      if (this.form.managementPhone == "") {
        return this.$message({
          message: "请填写管理员手机号",
          type: "warning"
        });
      }
      if (
        this.form.managementPhone.length != 11 &&
        this.form.managementPhone.substring(0, 1) != 1
      ) {
        return this.$message({
          message: "请填写正确的管理员手机号",
          type: "warning"
        });
      }
      editDevice(
        this.id,
        this.form.cameraIp,
        this.form.managementName,
        this.form.managementPhone,
        this.form.projectId
      ).then(res => {
        if (res.code == 200) {
          this.$message({
            message: "修改成功",
            type: "success"
          });
          document
            .querySelector(".tags-view-item.active>span.el-icon-close")
            .click();
        } else {
          this.$message({
            message: res.message,
            type: "warning"
          });
        }
      });
    },
    onCancle () {
      document
        .querySelector(".tags-view-item.active>span.el-icon-close")
        .click();
      this.$router.go(-1);
    },
    getOptions () {
      getProjectList("", 1, 100, 1).then(res => {
        this.options = res.data;
      });
    },
    getNum () {
      getNo().then(res => {
        this.form.no = res.data;
      });
    },
    getData (id) {
      getDetail(id).then(res => {
        this.form = res.data;
        this.form.projectId =
          this.form.projectId == 0 ? "" : this.form.projectId;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
  background-color: rgb(240, 242, 245);
  position: relative;
  .title {
    font-size: 14px;
    font-weight: 400;
    .title-icon {
      font-size: 14px;
      display: inline-block;
      margin-right: 5px;
    }
  }
  /deep/ .el-card__header {
    border: 0 none;
  }
}
.title-small {
  font-size: 14px;
}

.money {
  color: #409eff;
}
</style>
